<template>
  <div class="set-min-rate">
      <!-- 设置第三方公共费率 -->
      <div class="container">
        <div class="model-title text-overflow">设置第三方公共费率</div>
        <div class="form-box">
            <div class="filter-box">
              <el-select v-model="filter.brandId">
                  <el-option
                    v-for="item in brandList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></el-option>
               </el-select>
               <el-button @click="queryThirdRate">查询</el-button>
            </div>
            <div v-if="!(updateForm && Object.keys(updateForm).length !== 0)" class="list-box">
              <el-tabs v-model="activeType" type="card" @tab-click="handleTabsClick"  >
                <el-tab-pane label="支付宝配置" name="ALIPAY">
                  <span>支付宝配置</span>
                  <div class="rule-item" v-for="(cell, index) in rateList" v-if="cell.type === 'ALIPAY'" :key="index">
                    <div class="rule-list">
                      <div class="rule-cell" v-for="(rule,oindex) in cell.ranges" :key="oindex">
                        <div>
                          <span v-html="rule.lower || '0'"></span>
                          <span v-html="rule.lowerClosed?'<=':'<'"></span>
                          <span>用户消费额</span>
                          <span v-html="rule.upperClosed?'<=':'<'"></span>
                          <span v-html="rule.upper || '∞'"></span>
                        </div>
                        <div>
                          <p v-if="rule.rate!== undefined && rule.rate!==null" v-html="'商户费率：'+rule.rate"></p>
                          <p v-if="rule.agentRate!== undefined && rule.agentRate!==null" v-html="'代理费率：'+rule.agentRate"></p>
                          <p v-if="rule.platformRate!== undefined && rule.platformRate!==null" v-html="'平台费率：'+rule.platformRate"></p>
                        </div> 
                      </div>
                    </div>
                    <div>
                      <el-button @click="updateRate(cell)" type="danger">修改配置</el-button>
                    </div>
                  </div>

                </el-tab-pane>
                <el-tab-pane label="微信配置" name="WECHAT">
                  <span>微信配置</span>
                  <div class="rule-item" v-for="(cell, index) in rateList" v-if="cell.type === 'WECHAT'" :key="index">
                    <div class="rule-list">
                       <div class="rule-cell" v-for="(rule,oindex) in cell.ranges" :key="oindex">
                        <div>
                          <span v-html="rule.lower || '0'"></span>
                          <span v-html="rule.lowerClosed?'<=':'<'"></span>
                          <span>消费额</span>
                          <span v-html="rule.upperClosed?'<=':'<'"></span>
                          <span v-html="rule.upper || '∞'"></span>
                        </div>
                        <div>
                          <p v-if="rule.rate!== undefined && rule.rate!==null" v-html="'商户费率：'+rule.rate"></p>
                          <p v-if="rule.agentRate!== undefined && rule.agentRate!==null" v-html="'代理费率：'+rule.agentRate"></p>
                          <p v-if="rule.platformRate!== undefined && rule.platformRate!==null" v-html="'平台费率：'+rule.platformRate"></p>
                        </div> 
                      </div>
                       <el-button  @click="updateRate(cell)" type="danger">修改配置</el-button>
                    </div>
                  </div>

                </el-tab-pane>
              </el-tabs>
              
            </div>

            <div class="update-form" v-if="!!updateForm&&Object.keys(updateForm).length !== 0"  >
            
               <div class="rule-form-item rule-form-title">
                 <div>范围</div>
                 <div>费率</div>
               </div>
               <div class="rule-form-item" v-for="(cell,index) in updateForm.ranges" :key="index">
                 <div>
                    <el-input-number  v-if="cell.lower!==null" @change="handleLowerInputChange($event,index,updateForm.ranges)" v-model="cell.lower" :min="0" :max="cell.upper===null? Infinity: cell.upper-1" label="选择阀值"></el-input-number>
                    <span style="display:inline-block;width:130px;text-align:center" v-else>0</span>
                    <span style="display:inline-block;width:50px;text-align:center" >--</span>
                    <el-input-number  v-if="cell.upper!==null" @change="handleUpperInputChange($event,index,updateForm.ranges)" v-model="cell.upper" :min="cell.lower===null?1:cell.lower+1" label="选择阀值"></el-input-number>
                    <span style="display:inline-block;width:130px;text-align:center"  v-else>∞</span>
                 </div>
                 <div>
                    <div class="rate-label" v-if="cell.rate !== undefined && cell.rate!==null" >
                      <span>商户费率：</span>
                      <el-input-number v-model="cell.rate"  :step="0.0001" :min="0" :max="1" label="选择费率"></el-input-number>
                    </div>
                    <div class="rate-label" v-if="cell.agentRate !== undefined && cell.agentRate!==null" >
                      <span>代理商费率：</span>
                      <el-input-number v-model="cell.agentRate"  :step="0.0001" :min="0" :max="1" label="选择费率"></el-input-number>
                    </div>
                    <div class="rate-label" v-if="cell.lower!== null" >
                      <span>平台费率：</span>
                      <el-input-number v-model="cell.platformRate"  :step="0.0001" :min="0" :max="1" label="选择费率"></el-input-number>
                    </div>
                    
                 </div>
               </div>
                <div>
                  <el-button @click="addRanges" type="text"> 添加范围 </el-button>
                  <el-button @click="delRanges" type="text"> 删除范围 </el-button>
                </div>
               <div class="updateform-submit">
                 <el-button @click="submitRanges" type="danger">确认修改</el-button>
                 <el-button @click="cancelUpdate">取消</el-button>
               </div>
            </div>
        </div>
      </div>
  </div>
</template>

<script>

export default {
  name:'set-thirdparty-rate',
  data () {
    return {
      activeType:'ALIPAY', // ALIPAY  WECHAT
      updateForm:{},
        filter:{
          brandId:null
        },
        brandList:[],
        rateList:[]
    };
  },
  components: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init(){
      this.getBrandList(); // 获取品牌信息
    },
    cancelUpdate(){
      this.updateForm = {};
    },
    getBrandList(){
      let url = `user/brand/query/all`;
      this.$Http.get(url).then(res=>{
        if(res.data.resp_code === "000000"){
          this.brandList = res.data.result || [];
          if(this.brandList.length !== 0){
            this.filter.brandId = res.data.result[0].id;
            this.queryThirdRate();
            
          }
        }else{
           this.$notify.info({
              title: '提示',
              message: res.data.resp_message
          });
        }
      }).catch(err=>{
        this.$notify.error({
            title: '提示',
            message: "获取品牌信息失败！"
        });
      })
    },
    handleLowerInputChange(value,index,ranges){
      if(index>=1){
        // 前面有范围
        ranges[index-1].upper = value;
      }
    },
    handleUpperInputChange(value,index,ranges){
      if(index <= ranges.length-2){
        // 后面还有范围
        ranges[index+1].lower = value;
      }
    },
    addRanges(){
      let lastRule =  this.updateForm.ranges[this.updateForm.ranges.length-1];
      let newRule ={...lastRule};
      if(this.updateForm.ranges.length>1){
        newRule.agentRate = lastRule.agentRate || 0;
        newRule.platformRate =lastRule.platformRate ||  0;
        newRule.rate = lastRule.rate || 0;
      }
      newRule.lower = lastRule.upper = lastRule.lower + 100;
      lastRule.upperClosed = false;
      this.updateForm.ranges.push(newRule);
    },
    delRanges(){
      if(this.updateForm.ranges.length <=2){
        this.$message.error("至少保留一个范围！");
        return;
      }
      this.updateForm.ranges = this.$Tools.truncate(this.updateForm.ranges);
      let lastRule =  this.updateForm.ranges[this.updateForm.ranges.length-1];
      lastRule.upper = null;
      lastRule.upperClosed = null;
    },
    queryThirdRate(){
      this.updateForm ={}
      let url = `user/third_pay/rate/query`;
      if(this.filter.brandId===null || this.filter.brandId===''){
        this.$message.error("请先选择贴牌！");
        return ;
      }
      let params = `brandId=${this.filter.brandId}`;
      this.$Http.post(url,params).then(res=>{
        if(res.data.resp_code === '000000'){
          this.rateList = res.data.result;
        }else{
          this.$notify.info({
              title: '提示',
              message: res.data.resp_message
          });
        }
      }).catch(err=>{
        this.$notify.error({
            title: '提示',
            message: "获取第三方公共费率失败！"
        });
      })

    },
    updateRate(cell){
      // 修改配置
      this.updateForm = this.$Tools.cloneObj(cell);
    },
    handleTabsClick(){
      this.updateForm = {};
    },
    submitRanges(){
      let url = `user/third_pay/rate/update`;
      // console.log(this.updateForm);
      let params = JSON.stringify(this.updateForm);
      this.$Http.post(url,params,{
        headers:{
          'Content-Type': 'application/json;charset=UTF-8'
        }
      }).then(res=>{
        if(res.data.resp_code === '000000'){
          this.$message.success("修改成功！");
          this.queryThirdRate();
          this.updateForm = {};
        }else{
          this.$notify.info({
              title: '提示',
              message: res.data.resp_message
          });
        }
      }).catch(err=>{
        this.$notify.error({
            title: '提示',
            message: "修改配置失败！"
        });
      })
    },
    cancelRanges(){
      this.updateForm = {};
    }
  }
}

</script>
<style scoped>
.form-box{
  padding: 20px;
}
.filter-box{
  padding: 20px;
}
.rule-cell,.rule-form-item{
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #efefef;
  padding: 15px ; 
}
.rule-cell>div,.rule-form-item>div{
  flex-grow: 1;
  text-align: center;
  border-left: 1px solid #efefef;
}
.rule-form-title{
  background-color: #efefef;
}
.updateform-submit{
  text-align: center;
}
.rate-label{
  padding: 8px 0; 
}
</style>
